<template>
    <div class="app-container" v-cloak>
        <levelbar></levelbar>
        <el-form label-width="110px" class="app-content" :rules="rules" :model="ruleForm" ref="ruleForm">
            <div class="box">
                <div class="appTitle">修改学校</div>
                <div class="appTop">学校信息</div>
                <div class="formCon">
                    <el-row :gutter="21">
                        <el-col :span="8">
                            <el-form-item label="所属省：">
                                <span>{{ruleForm.fProvinceId}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="21">
                        <el-col :span="8">
                            <el-form-item label="所属市：">
                                <span>{{ruleForm.fCityId}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="21">
                        <el-col :span="8">
                            <el-form-item label="所属区县：">
                                <span>{{ruleForm.fAreaId}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="21">
                        <el-col :span="12">
                            <el-form-item label="详细地址：" prop="schoolAddress">
                                <el-popover placement="top-start" trigger="focus" content="字符长度不大于30个">
                                    <el-input v-model="ruleForm.schoolAddress" placeholder="请输入学校地址" :maxlength="30" slot="reference" style="width:95%"></el-input>
                                </el-popover>    
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="footer">
                <el-button @click="resetForm">取消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')" :loading="loadingBtn">确认</el-button>
            </div>
        </el-form>
    </div>
</template>
 
<script>
import Levelbar from '../layout/Levelbar';
import {updateSchoolByCondition, getSchoolInfo} from 'api/schoolManage';
import { mapGetters } from 'vuex';
// import province from 'components/CascadeRegion/province';
// import city from 'components/CascadeRegion/city';
// import region from 'components/CascadeRegion/region';
export default{
    name: 'modifySchool',
    components: {Levelbar},
    data() {
        return {
            schoolLoading: false,
            ruleForm: {
                fProvinceId: '',
                fAreaId: '',
                fCityId: '',
                schoolAddress: ''
            },
            dynamicTags: [],
            loadingBtn: false,
            rules: {
                schoolAddress: [
                { required: true, message: '请输入学校地址', trigger: 'blur' },
                { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'}
                ]
            }
        }
    },
  
    computed: {
        ...mapGetters([
            'uid'
        ])
    },
    created() {
        this.searchInfo();
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$confirm('确定要提交吗?', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(() => {
                        this.loadingBtn = true;
                        updateSchoolByCondition(
                            this.$route.params.schoolId,    
                            this.ruleForm.fProvinceId,
                            this.ruleForm.fCityId,
                            this.ruleForm.fAreaId,
                            this.ruleForm.schoolAddress,
                    ).then(response => {
                        this.$message({
                            type: 'success',
                            message: response.data.errorMsg
                        })
                        this.$router.push({path: '/schoolManage/schoolManages'});
                        this.$store.dispatch('UpdateCache', true);// 修改 和查看
                    }).catch(() => {
                        this.loadingBtn = false;
                    });
                    })
                } else {
                    return false;
                }
            });
        },
    // 查询修改信息
        searchInfo() {
            getSchoolInfo(this.$route.params.schoolId).then(response => {
                this.ruleForm.fProvinceId = response.data.content.provinceName;
                this.ruleForm.fCityId = response.data.content.cityName;
                this.ruleForm.fAreaId = response.data.content.areaName;
                this.ruleForm.schoolAddress = response.data.content.detail;
            });
        },
        searchProvice() {
            queryAllProvince().then(response => {
                let findProvice = response.data.content;
                let select = {
                    provinceName: '请选择',
                    provinceId: ''
                }
                findProvice.unshift(select);
                this.ruleForm.province = findProvice;
                this.ruleForm.fProvinceId = findProvice[0].provinceId;
            }).then(response => {
                this.getSchoolType();
            });
        },
        changeProvice(a) {
            if (this.isProvice == '') {
                this.ruleForm.findCity = [];
                this.ruleForm.findArea = [];
                this.ruleForm.fCityId = '';
                this.ruleForm.fAreaId = '';
            }
            if (a=='') {
                return;
            }
            queryAllCityByProvinceId(a).then(response => {
                let findCity = response.data.content;
                let select = {
                    cityName: '请选择',
                    cityId: ''
                }
                findCity.unshift(select);
                this.ruleForm.findCity = findCity;
    
            });
        },
        changeCityId(a) {
            if (this.isProvice == '') {
                this.ruleForm.findArea = [];
                this.ruleForm.fAreaId = '';
                this.isProvice = '1';
            }
            if (a=='') {
                return;
            }
            queryAllAreaByCityId(a).then(response => {
                let findArea = response.data.content;
                let select = {
                    areaName: '请选择',
                    areaId: ''
                }
                findArea.unshift(select);
                this.ruleForm.findArea = findArea;
            });
        },
    // 跳转
        resetForm() {
            this.$router.push({path: '/schoolManage/schoolManages'});  
        }  
    
    }
}
</script>
 
<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }
    .el-form{
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        background:#fff;
        padding-bottom:170px;
        .appTop{
            position: relative;
            font-size: 14px;
            color: rgb(106, 85, 72);
            padding-left: 16px;
            margin: 30px 0;
            display: block;
            &::after {
                position: absolute;
                content:'';
                width: 4px;
                height: 14px;
                background: #ff5e2c;
                left: 0;
                top: 3px;
            }
        }
        .el-form-item{
            margin-top:8px;
        }
        .appTitle{
            padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            font-weight: bold;
            font-family: Microsoft YaHei;
            border-bottom: 1px solid #ddd;
        }
        .box{
            padding: 0px 50px 0;
            background:#fff;
        }
        .footer {
          //float: right;
          text-align: center;
          margin-top: 60px;
        }
    }
    
}
 
</style>